import React , { PureComponent } from "react"
import Link from "umi/link"
import {MenuUnfoldOutlined, MenuFoldOutlined} from "@ant-design/icons"

import styles from './index.less';
import Debounce from 'lodash-decorators/debounce';

export default class GlobalHeader extends PureComponent {

    componentWillUnmount() {
        this.triggerResizeEvent.cancel();
      }

  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);

  }

  toggle = () => {
    const { collapsed, onCollapse } = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };
    render(){
        const {collapsed, isMobile, logo} = this.props;
        return (
            <div className={styles.header}>
            {
                isMobile && 
                <Link to="/" className={styles.logo} key="logo">
                    <img src={logo} alt="logo" width="32"/>
                </Link>
            }
                
                <span className={styles.trigger} onClick={this.toggle}>
                    {
                        collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
                    }
                </span>
            </div>
        )
    }
    
}